import React from 'react'
import IconButton from '@/components/common/IconButton'
import { ChevronLeft, ChevronRight } from 'lucide-react'

export default function Pagination({ className, total, page, limit, leftDisabled, leftOnClick, rightDisabled, rightOnClick }) {
  return (
    <>{!!total && !!page && !!limit &&
      <div className={`bg-white py-2 px-4 mt-2 rounded-t-xs ${className}`}>
        <div className='flex justify-between items-center'>
          {!!total && <div className='text-sm'>共 {total} 条数据</div>}
          <div className='flex gap-2 justify-center align-center'>
            <div className='w-fit'>
              <IconButton onClick={leftOnClick} disabled={leftDisabled}><ChevronLeft color='#FFFFFF' /></IconButton>
            </div>
            {!!page && <div className='text-sm flex gep-1 items-center'>第{page}{total ? <span> / {Math.ceil(total / limit)} </span> : <span></span>}页</div>}
            <div className='w-fit'>
              <IconButton onClick={rightOnClick} disabled={rightDisabled}><ChevronRight color='#FFFFFF' /></IconButton>
            </div>
          </div>
          {!!limit && <div className='text-sm'>每页 {limit} 条</div>}
        </div>
      </div>
    }</>
  )
}
